<template>
  <div>
    <div>
      <div>
        <a-carousel v-if="olds" arrows dots-class="slick-dots slick-thumb">
          <a slot="customPaging" slot-scope="props">
            <img :src="getOldImgUrl(props.i)" />
          </a>
          <div v-for="item in viewSlideShow" :key="item">
            <img style="height:200px;width:400px" :src="baseUrl + item" />
          </div>
        </a-carousel>
        <a-carousel v-if="news" arrows dots-class="slick-dots slick-thumb">
          <a slot="customPaging" slot-scope="props">
            <img :src="getNewImgUrl(props.i)" />
          </a>
          <div v-for="item in testSlideShow" :key="item">
            <img style="height:200px;width:400px" :src="baseUrl + item" />
          </div>
        </a-carousel>
      </div>
      <p style="height:50px"/>
      <div style="text-align:center">
        <a-button type="primary" @click="testSubmit" style="text-align:center;;margin-right:10px">
          Test
        </a-button>
        <a-button type="primary" @click="handleSubmit" style="text-align:center">
          Submit
        </a-button>
        <a-button type="primary" @click="reset" style="text-align:center;margin-left:10px">
          Reset
        </a-button>
        <a-button type="primary" @click="addSubmit" style="text-align:center;margin-left:10px">
          Add
        </a-button>
      </div>
      <p style="height:10px"/>
      <div>
        <a-list :grid="{ gutter: 16, column: 3 }" :data-source="data" :pagination="{onChange: (current, size) => {updateNum(current)}, showQuickJumper: true, pageSize: 12, total: totalList}">
          <a-list-item slot="renderItem" slot-scope="item,index">
            <a-card :hoverable="true" >
              <div class="flexPicture">
                <img
                  slot="cover"
                  alt="example"
                  style="position:relative;clear:both;width:200px;height:200px;"
                  :src="baseUrl + item.picture"
                />
                <img
                  style="margin-top:-20px;height:20px;width:20px"
                  src="../../assets/uncheck.png"
                  @click="check(data[index+(pageNum-1)*12].sequence,index,1)"
                  v-show="!(data[index+(pageNum-1)*12].sequence === '1')"
                />
                <img
                  style="margin-top:-20px;height:20px;width:20px"
                  src="../../assets/check.png"
                  @click="check(data[index+(pageNum-1)*12],index,0)"
                  v-show="(data[index+(pageNum-1)*12].sequence === '1')"
                />
              </div>
            </a-card>
          </a-list-item>
        </a-list>
      </div>
    </div>
    <div>
      <a-modal
        title="上传图片"
        style="top: 20px;"
        :width="800"
        v-model="visible"
        @ok="handleOk"
      >
        <div class="clearfix">
          <a-upload
            action="/api/slideShow/addSlideShow"
            list-type="picture-card"
            :headers="headers"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
import { updateSlideShow, getAllSlideShow } from '@/api/manage'
import storage from 'store'
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
const baseUrl = 'https://image.lcsum.top/picture/'
export default {
    data () {
        return {
          totalList: 0,
          previewVisible: false,
          fileList: [],
          previewImage: '',
          olds: true,
          news: false,
          cur: 0,
          num: 0,
          pageNum: 1,
          visible: false,
          token: storage.get('Access-Token'),
          baseUrl,
          data: [],
          testSlideShow: [],
          viewSlideShow: '',
          submitIds: [],
          checkPicture: [[]],
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 }
          }
        }
  },
  computed: {
  // 自定义请求头
      headers () {
          return {
              'Access-Token': this.token
          }
      }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    handleOk () {
      this.visible = false
    },
    updateNum (current) {
      this.pageNum = current
      // console.log(current)
    },
    getOldImgUrl (i) {
      return `${baseUrl}${this.viewSlideShow[i]}`
    },
    getNewImgUrl (i) {
      return `${baseUrl}${this.testSlideShow[i]}`
    },
    // 选中图片
    check (aa, index, state) {
        // console.log(aa, index, state)
        var that = this
        const count = index + 12 * (this.pageNum - 1)
        // 1选中
        if (state === 1) {
          this.$set(this.data[count], 'sequence', '1')// 需要使用set方式才能生效，直接赋值无法生效
          // console.log(count)
          this.testSlideShow.push(this.data[count].picture)
          this.submitIds.push(this.data[count].id)
        } else {
          this.$set(this.data[count], 'sequence', '0')// 需要使用set方式才能生效，直接赋值无法生效
          this.testSlideShow.splice(this.testSlideShow.findIndex(function (item) {
            return item === that.data[count].picture
          }), 1)
          this.submitIds.splice(this.submitIds.findIndex(function (item) {
            return item === that.data[count].id
          }), 1)
        }
    },
    // 提交新的顺序
    handleSubmit () {
      // console.log('提交')
      // 新数据id
      // console.log(this.submitIds.toString())
      const Ids = { id: this.submitIds.toString() }
      updateSlideShow(Ids).then((res) => {
        // console.log('success')
      })
    },
    reset () {
      this.olds = true
      this.news = false
      for (var i = 0; i < this.data.length; i++) {
        this.$set(this.data[i], 'sequence', '0')
      }
    },
    addSubmit () {
      this.visible = true
    },
    getAll () {
      getAllSlideShow().then((res) => {
        this.data = res.datalist
        this.totalList = this.data.length
        this.viewSlideShow = res.total.replaceAll(' ', '').split(',')
        // console.log(this.token)
      })
    },
    testSubmit () {
      this.news = true
      this.olds = false
      // console.log(this.testSlideShow)
    }
  },
  created () {
      this.getAll()
    }
}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-dots {
  height: auto;
}
.ant-carousel >>> .slick-slide img {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 80%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -45px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
.flexPicture{
  display: flex;
  flex-direction: row;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
